<template>
  <div class="slider-wrapper">
    <!--		<van-slider v-if="isMobile" v-model:value="changeValue" :max="item.max" :min="item.min" :step="item.step" active-color="#1890ff">-->
    <!--			<template #button>-->
    <!--				<div class="custom-slider-button">{{ changeValue }}</div>-->
    <!--			</template>-->
    <!--		</van-slider>-->
    <van-slider
      v-if="isMobileTag"
      v-model="changeValue"
      :max="item.max"
      :min="item.min"
      :step="item.step"
    >
      <template #button>
        <div class="custom-slider-button">{{ changeValue }}</div>
      </template>
    </van-slider>

    <el-slider
      v-bind="{ ...item }"
      v-else
      v-model="changeValue"
    />
  </div>
</template>

<script name="Slider" setup>
import { Slider } from "vant";
import { formEmits, formItemProps, useFormItem } from "@/views/formgen/components/FormItem/hooks/useFormItemHook";

const props = defineProps({
  ...formItemProps
});

const emits = defineEmits(formEmits);

const { changeValue, isMobileTag } = useFormItem(props, emits, true);
</script>

<style lang="scss" scoped>
.slider-wrapper {
  width: 100%;
  height: 100%;
  padding: 0 10px;
}

.custom-slider-button {
  width: 26px;
  color: #fff;
  font-size: 10px;
  line-height: 18px;
  text-align: center;
  background-color: var(--form-theme-color);
  border-radius: 100px;
}

@media screen and (max-width: 768px) {
  .slider-wrapper {
    padding: 0 15px;
    margin-bottom: 10px;
  }

  .custom-slider-button {
    font-size: 13px !important;
    line-height: 24px !important;
    width: 32px !important;
  }
}
</style>
